<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/mhDoLbDldZc3qpsJHpLogda//BVZbgYuw6kof4u2FrCedxOtgRZDTHgHUhOCVim" crossorigin="anonymous"></script>
</head>
<body>

<!--网页header-->
<!--<div th:replace="~{common::myheader}"></div>-->
<div class="container">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 border-bottom" th:fragment="myheader">
        <a href="/" class="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none">
            <svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
        </a>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            <li><a href="/" class="nav-link px-2 link-secondary">index</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">list</a></li>
            <li><a href="/demo" class="nav-link px-2 link-dark">demo</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">none</a></li>
            <li><a href="/list" class="nav-link px-2 link-dark">none</a></li>
        </ul>

        <div class="col-md-3 text-end">
            <button type="button" class="btn btn-outline-primary me-2">Login</button>
            <button type="button" class="btn btn-primary">Sign-up</button>
        </div>
    </header>
</div>



<table class="table">
    <thead>
    <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">stat</th>
    </tr>
    </thead>
    <tbody>

<!--    <p th:if="true"></p>-->

    <tr th:each="Cls2:${list}">
        <th scope="row">> </th>
        <td>[[${Cls2.name}]]</td>

<!--        SwitchCase-->
        <td th:switch="${Cls2.name}">
            <span th:case="sb书中天" th:text="|${Cls2.name}-小sb|"></span>
            <span th:case="水中天" th:text="|${Cls2.name}-中sb|"></span>
            <span th:case="f5水中天" th:text="|${Cls2.name}-大sb|"></span>
        </td>
    </tr>
    </tbody>
</table>

<script>
    let xhr=new XMLHttpRequest();//用来发请求的
    xhr.open("GET","http://localhost:8080/list1")//打开链接发送请求
    xhr.onreadystatechange=function (){
        if(xhr.readyState===4){
            if(xhr.status===200){
                console.log("成功")
                console.log(xhr.responseText);

                let parse = JSON.parse(xhr.responseText);
                console.log(parse)
                // let tBody = document.querySelector("tbody");
                // let newEle=document.createElement("tr");
                // tBody.appendChild(newEle);
            }else{
                console.log("出错了");
            }
        }
    }
        xhr.send();
</script>
</body>
</html>